ngu-sw-manifest --module ... fails

[markgoho]

$ ./node_modules/.bin/ngu-sw-manifest works just fine.

$ ./node_modules/.bin/ngu-sw-manifest --module ./src/app/app.module.ts throws a rather long error, but at the start is:

Unhandled Promise rejection: ENOENT: no such file or directory, open 'C:\Users\Nella\Documents\GitHub\io17\icon.component.html' ; Zone: <root> ; Task: Promise.then ; Value: { Error: ENOENT: no such file or directory, open 'C:\Users\Nella\Documents\GitHub\io17\icon.component.html'

No surprise: I'm on Windows and this looks like it has something to do with the path.

[markgoho]

If I use a complete path, e.g. ./node_modules/.bin/ngu-sw-manifest --module c:/users/nella/documents/github/io17/src/app/app.module.ts

I get the following error

C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\bundles\compiler.umd.js:1550
    var /** @type {?} */ error = Error(msg);
                                 ^
Error: Unexpected value 'AppModule' imported by the module 'FakeServerModule'. Please add a @NgModule annotation.
    at syntaxError (C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\bundles\compiler.umd.js:1550:34)
    at C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\@angular\compiler.es5.js:14499:22
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\@angular\compiler.es5.js:14482:42)
    at JitCompiler._loadModules (C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\@angular\compiler.es5.js:25635:61)
    at JitCompiler._compileModuleAndComponents (C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\@angular\compiler.es5.js:25594:21)
    at JitCompiler.compileModuleAsync (C:\Users\Nella\Documents\GitHub\io17\node_modules\@angular\compiler\bundles\compiler.umd.js:25561:23)
    at readRoutesForModule (C:\Users\Nella\Documents\GitHub\io17\node_modules\ng-pwa-tools\lib\ls-routes\lib.js:43:10)
    at extractRoutes (C:\Users\Nella\Documents\GitHub\io17\node_modules\ng-pwa-tools\lib\ls-routes\lib.js:71:12)
    at Object.extractTerminals (C:\Users\Nella\Documents\GitHub\io17\node_modules\ng-pwa-tools\lib\ls-routes\lib.js:75:12)

[mithilgotarne]

i am getting similar a error @alxhub @markgoho $ ./node_modules/.bin/ngu-sw-manifest --module src/app/app.module.ts

H:\Mithil\angular-2\site\node_modules\@angular\compiler\bundles\compiler.umd.js:1550
    var /** @type {?} */ error = Error(msg);
                                 ^
Error: Unexpected value 'undefined' imported by the module 'AppModule'
    at Error (native)
    at syntaxError (H:\Mithil\angular-2\site\node_modules\@angular\compiler\bundles\compiler.umd.js:1550:34)
    at H:\Mithil\angular-2\site\node_modules\@angular\compiler\@angular\compiler.es5.js:14505:27
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (H:\Mithil\angular-2\site\node_modules\@angular\compiler\@angular\compiler.es5.js:14482:42)
    at CompileMetadataResolver.getNgModuleSummary (H:\Mithil\angular-2\site\node_modules\@angular\compiler\@angular\compiler.es5.js:14424:10)
    at H:\Mithil\angular-2\site\node_modules\@angular\compiler\@angular\compiler.es5.js:14497:65
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (H:\Mithil\angular-2\site\node_modules\@angular\compiler\@angular\compiler.es5.js:14482:42)
    at JitCompiler._loadModules (H:\Mithil\angular-2\site\node_modules\@angular\compiler\@angular\compiler.es5.js:25635:61)

[alxhub]

Hi @markgoho,

Your error is the result of having two different versions of Angular installed. npm ls | grep @angular should show you.

[markgoho]

Here's what I get from that command

+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
| +-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
npm ERR! peer dep missing: @angular/animations@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/common@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/compiler@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/compiler-cli@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/core@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/http@~4.0.2, required by [email protected]

I downloaded your repo, did yarn install and these are the errors I'm getting:

warning "[email protected]" has incorrect peer dependency "@angular/animations@~4.0.2".
warning "[email protected]" has incorrect peer dependency "@angular/common@~4.0.2".
warning "[email protected]" has incorrect peer dependency "@angular/compiler@~4.0.2".
warning "[email protected]" has incorrect peer dependency "@angular/compiler-cli@~4.0.2".
warning "[email protected]" has incorrect peer dependency "@angular/core@~4.0.2".
warning "[email protected]" has incorrect peer dependency "@angular/http@~4.0.2".

[markgoho]

Okay, I fixed the unmet peer dependencies by changing your package.json to use tildes instead of carets for all the @angular dependencies, e.g. "@angular/core": "~4.0.0", instead of "@angular/core": "^4.0.0",

I now get this for npm ls | grep @angular:

+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
| +-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]

And I still get the same exact errors as above when trying the command with a relative path or a full path.

[fmoessle]

I get the same error as @mithilgotarne does. I tried different versions of @angular but it did not work. What does Unexpected value 'undefined' imported by the module 'AppModule' exactly mean?

[alfredoperez]

Hi @alxhub

Awesome demo! I am writing a blog post following your demo but got stuck generating manifest and app shell.

What do you mean by having two Angular Versions? Do we need to use a specific angular-cli and angular version?

Thanks for all your work!

[alxhub]

@alfredoperez thank you!

Yarn should ensure you get the exact same set of versioned packages as in the demo. Currently there are peer dep errors but those can be ignored.

By two Angular versions, I mean that you have a situation where @angular/core from 4.1.0 is installed somewhere, but you also have a full Angular install for 4.2.0, for example. This might end up creating a situation where your code uses NgModule from one version of Angular but tries to compile it against another. Because these two Angular packages are in different locations, the NgModule metadata will not be considered the same, and the compiler will complain that your module is not annotated, since it ignores the annotation from the incorrect Angular version.

[BorntraegerMarc]

@alfredoperez please write in here or to me as soon as your blog post is published :) would be really interesting to read it!

[aerojas]

I have a similar issue described in #16 , but even if I use absolute paths, I still get the same error.

First lines of output of npm ls | grep @angular :

$ npm ls | grep @angular
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
| +-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
npm+-- @angular/[email protected]
+-- @angular/[email protected]
ERR! peer dep missing: @angular/animations@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/common@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/compiler@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/compiler-cli@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/core@~4.0.2, required by [email protected]
npm ERR! peer dep missing: @angular/http@~4.0.2, required by [email protected]
npm ERR! extraneous: [email protected] C:\Users\Armando\Documents\SCC17\Workspace\SCC17-Cliente\node_modules\bindings
npm ERR! error in C:\Users\Armando\Documents\SCC17\Workspace\SCC17-Cliente\node_modules\chalk\node_modules\supports-colo
r: Invalid version: "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
npm ERR! invalid: supports-color C:\Users\Armando\Documents\SCC17\Workspace\SCC17-Cliente\node_modules\chalk\node_module
s\supports-color

The following lines are "Invalid version" errors from other packages. I'll try to reinstall node_modules and see what happens.

[maciejtreder]

The problem is that ngu-sw-manifest can't recognize paths correctly.

There is also problem with lazy-loaded modules. Tool is always starting in src (on my end). My initial catalog structure was:

src
|---app
       |---app.module.ts
       |---lazy
                |--- lazy.module.ts

And there were problem with lazy.module.ts (it was linked from app as ./lazy/lazy.module.ts), until I moved my app.module.ts to src (ngu-sw-manifest was looking for src/lazy/lazy.module.ts instead src/app/lazy/lazy.module.ts).

I tried to move all my files to src, but I am still running into issue with html templates and (s)css files.

I verified my @angular instalation:

npm ls | grep @angular
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├─┬ @angular/[email protected]
│ ├─┬ @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├─┬ @angular/[email protected] (git+https://github.com/angular/material2-builds.git#c4ecd5a08ac5a4aea94a16bbc4a5f948c19a051f)
├── @angular/[email protected]
├── @angular/[email protected]
├─┬ @angular/[email protected]
├── @angular/[email protected]

It looks ok in my opinion. What more can I do?

The issue which I am running to is:

ENOENT: no such file or directory, open 'home-view.component.html'

The only solution which I found is to change all relative paths to absolute ones:

  selector: 'home-view',
  templateUrl: '/Users/mtr/angular-universal-serverless/src/app/home/home-view.component.html',
  styleUrls: ['/Users/mtr/angular-universal-serverless/src/app/common.component.scss'],
})

But this is unacceptable if you want to share code with others.

[aerojas]

I solved my issue! Check your import routes too. Please see #16

[alfredoperez]

@BorntraegerMarc I found the article from @MichaelSolati ...it is amazing https://dev.to/michaelsolati/pwas-with-angular-beingreliable

[BorntraegerMarc]

Thanks for sharing! Had to copy & paste the link because clicking on it didn't work...

[alfredoperez]

@aerojas How did you fix it?

[aerojas]

@alfredoperez The complete solution is in #16 The (veeery) short solution could be the following steps:

1. Add moduleId: module.id to each @Component in your app
2. Check your import routes. VSCode or some plugin generates paths in the form /some_folder/another_folder/ (absolute paths) which is not correct, they shoud have the form ./some_folder/another_folder or ../parent_folder/some_folder/another_folder (relative paths)

I suggest you to check my issue and determine if it relates to your problem, then checking the steps I described there. If you have any questions, I'd be happy to help.

[MichaelSolati]

@aerojas those are non issues. The issue that @alfredoperez may be based off of my (ng-popular-movies-pwa)[https://github.com/MichaelSolati/ng-popular-movies-pwa] repo, where every component's decorator looks like so...

@Component({
  moduleId: module.id,
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})

And I exclusively use relative paths in my codebase. Mind you this has been a windows specific issue (and I don't have a windows machine readily available to test on). I will be trying to debug this tomorrow.

[aerojas]

@MichaelSolati well, one of my steps involved setting up a Linux VM in order to make it work. I read somewhere that the Windows version of ngu-sw-manifest had some incorrect slashes, but I don't know more than that, I haven't tested on Windows again for now.

[alxhub]

Hey guys! That's some awesome debugging/workaround development!

I should have some time to update ng-pwa-tools soon. I'll try to focus on windows support and some more documentation.

[tanchohang]

still getting similar errors on windows.

[alfredoperez]

@tanchohang I think this hasn't been fixed...but let me give you a workaround.

you can integrate this in your CI. In my case, I use Travis to deploy from Git to Firebase and that works well.

The only bad thing is that I can't test the service worker while developing. I don't think this is too bad since once your service worker and manifest is setup you don't have to make many changes.

Please take a look at the travis.yml and the package.json from my repo: https://github.com/alfredoperez/ngx-hn

[abnersouza]

Hey guys,

I'm trying to run the command ./node_modules/.bin/ngu-sw-manifest --module ./src/app/app.module.ts

/Users/asouza/Documents/Git/rocket/app/node_modules/jquery-slimscroll/jquery.slimscroll.js:474 })(jQuery); ^ ReferenceError: jQuery is not defined at Object. (/Users/asouza/Documents/Git/rocketdev/app/node_modules/jquery-slimscroll/jquery.slimscroll.js:474:4) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (/Users/asouza/Documents/Git/rocketdev/app/src/app/theme/directives/baSlimScroll/baSlimScroll.directive.ts:3:1) at Module._compile (module.js:570:32)

This error happened in others libraries as well i deleted them, until i get this one with the baSlimScroll that I can't delete.

Any suggestion, I've already added the moduleId to all my component as well.

Thanks