"Cannot find module" when using ngu-sw-manifest --module

[aerojas]

I'm trying to use the --module option in my Angular app, but the following error appears:

C:\Users\aerojas\Documents\MyApp\Workspace\MyApp>.\node_modules\.bin\ngu-sw-manifest --module .\src\app\app.module.ts
Unhandled Promise rejection: ENOENT: no such file or directory, open 'C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\app.component.html' ; Zone: <root> ; Task: Promise.then ; Value: { Error: ENOENT: no such file or directory, open
 'C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\app.component.html'
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:491:33)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:24:24
    at new ZoneAwarePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-nod
e.js:834:29)
    at FileLoader.get (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.
js:23:16)
    at DirectiveNormalizer._fetch (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14095:43)
    at DirectiveNormalizer.normalizeTemplateOnly (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\
@angular\compiler\bundles\compiler.umd.js:14138:29)
    at DirectiveNormalizer.normalizeTemplate (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14122:36)
    at CompileMetadataResolver.loadDirectiveMetadata (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:15121:44)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:
26692:66
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\aerojas\\Documents\\MyApp\\Workspace\\MyApp\\app.component.html',
  __zone_symbol__currentTask:
   ZoneTask {
     _zone:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } } Error: ENOENT: no such file or directory, open 'C:\Users\aerojas\Documents\MyApp\Workspace\S
CC17-Cliente\app.component.html'
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:491:33)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:24:24
    at new ZoneAwarePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:834:29)
    at FileLoader.get (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:23:16)
    at DirectiveNormalizer._fetch (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14095:43)
    at DirectiveNormalizer.normalizeTemplateOnly (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\
@angular\compiler\bundles\compiler.umd.js:14138:29)
    at DirectiveNormalizer.normalizeTemplate (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14122:36)
    at CompileMetadataResolver.loadDirectiveMetadata (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:15121:44)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:26692:66
{ Error: Uncaught (in promise): Error: ENOENT: no such file or directory, open 'C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\app.component.html'
Error: ENOENT: no such file or directory, open 'C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\app.component.html'
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:491:33)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:24:24
    at new ZoneAwarePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:834:29)
    at FileLoader.get (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:23:16)
    at DirectiveNormalizer._fetch (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14095:43)
    at DirectiveNormalizer.normalizeTemplateOnly (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\
@angular\compiler\bundles\compiler.umd.js:14138:29)
    at DirectiveNormalizer.normalizeTemplate (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14122:36)
    at CompileMetadataResolver.loadDirectiveMetadata (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:15121:44)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:26692:66
    at resolvePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:770:31)
    at resolvePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:741:17)
    at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:818:17
    at ZoneDelegate.invokeTask (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:424:31)
    at Zone.runTask (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:191:47)
    at drainMicroTaskQueue (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:584:35)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)
    at Function.Module.runMain (module.js:607:11)
    at Object.<anonymous> (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ts-node\src\_bin.ts:177:12)
    at Module._compile (module.js:571:32)
  rejection:
   { Error: ENOENT: no such file or directory, open 'C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\app.component.html'
       at Object.fs.openSync (fs.js:584:18)
       at Object.fs.readFileSync (fs.js:491:33)
       at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:24:24
       at new ZoneAwarePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:834:29)
       at FileLoader.get (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:23:16)
       at DirectiveNormalizer._fetch (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14095:43)
       at DirectiveNormalizer.normalizeTemplateOnly (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14138:29)
       at DirectiveNormalizer.normalizeTemplate (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14122:36)
       at CompileMetadataResolver.loadDirectiveMetadata (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:15121:44)
       at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:26692:66
     errno: -4058,
     code: 'ENOENT',
     syscall: 'open',
     path: 'C:\\Users\\aerojas\\Documents\\MyApp\\Workspace\\MyApp\\app.component.html',
     __zone_symbol__currentTask:
      ZoneTask {
        _zone: [Object],
        runCount: 0,
        _zoneDelegates: null,
        _state: 'notScheduled',
        type: 'microTask',
        source: 'Promise.then',
        data: undefined,
        scheduleFn: undefined,
        cancelFn: null,
        callback: [Function],
        invoke: [Function] } },
  promise:
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value:
      { Error: ENOENT: no such file or directory, open 'C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\app.component.html'
          at Object.fs.openSync (fs.js:584:18)
          at Object.fs.readFileSync (fs.js:491:33)
          at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:24:24
          at new ZoneAwarePromise (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\zone.js\dist\zone-node.js:834:29)
          at FileLoader.get (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\ng-pwa-tools\lib\common\ng.js:23:16)
          at DirectiveNormalizer._fetch (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14095:43)
          at DirectiveNormalizer.normalizeTemplateOnly (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14138:29)
          at DirectiveNormalizer.normalizeTemplate (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\bundles\compiler.umd.js:14122:36)
          at CompileMetadataResolver.loadDirectiveMetadata (C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:15121:44)
          at C:\Users\aerojas\Documents\MyApp\Workspace\MyApp\node_modules\@angular\compiler\@angular\compiler.es5.js:26692:66
        errno: -4058,
        code: 'ENOENT',
        syscall: 'open',
        path: 'C:\\Users\\aerojas\\Documents\\MyApp\\Workspace\\SCC17Cliente\\app.component.html',
        __zone_symbol__currentTask: [Object] } },
  zone:
   Zone {
     _properties: {},
     _parent: null,
     _name: '<root>',
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: null,
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: null,
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: null,
        _invokeZS: null,
        _invokeDlgt: null,
        _invokeCurrZone: null,
        _handleErrorZS: null,
        _handleErrorDlgt: null,
        _handleErrorCurrZone: null,
        _scheduleTaskZS: null,
        _scheduleTaskDlgt: null,
        _scheduleTaskCurrZone: null,
        _invokeTaskZS: null,
        _invokeTaskDlgt: null,
        _invokeTaskCurrZone: null,
        _cancelTaskZS: null,
        _cancelTaskDlgt: null,
        _cancelTaskCurrZone: null,
        _hasTaskZS: null,
        _hasTaskDlgt: null,
        _hasTaskDlgtOwner: null,
        _hasTaskCurrZone: null } },
  task:
   ZoneTask {
     _zone:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

It seems the issue has to do with how the tool (or its dependencies) solve the directories:

In my app.component.ts file, my templateUrl is ./app.component.html and it works fine when compiling (ng serve). If I modify it to something like ./src/app/app.component.html it works fine with ngu-sw-manifest, but fails when I do ng serve because it cannot find the .html file. And the problem extends all the components in my app.

If I move to src/ and run ../node_modules/.bin/ngu-sw-manifest --module ./app/app.module.ts I get ../node_modules/.bin/ngu-sw-manifest: line 12: node_modules/.bin/ts-node: No such file or directory

Thank you.

[alxhub]

Hi @aerojas. The --lazy-root flag (default value src) can tell ngu-sw-manifest which path to use to resolve lazy routes.

To get your templates working correctly, you need to specify moduleId: module.id alongside the templateUrl. Then your template URL can be ./app.component.html as the CLI expects, and ngu-sw-manifest will be able to resolve the full path.

ngu-sw-manifest must be run from the root dir of your project (next to node_modules).

[aerojas]

Thank you Alex for your time and making this tool.

I could resolve the issue, it was not so simple though (I'm saying this for the Virtual Machine part, it was a bit extreme solution in my opinion, haha).

Steps I had to follow:

• Setting up a Linux Virtual Machine (I blamed Windows for not solving routes correctly, but it could be possible that this step was not really necessary :P , so I'd suggest to try the rest of the steps before trying this)
• Install and update the dependencies (I used yarn)
• Add moduleId: module.id in @Component for all components of my app
• Important (this probably was one of the causes of the issue): check how are the file routes written in your modules/components/services in the imports section. Some routes started with ./some_folder (correct), but others started without the period and the slash --> /some_folder/ (incorrect). I don't know if that was my fault or it was written that way by VSCode/some VSCode plugin. Once I fixed this, the issue was solved.
• Generate the production build (ng build --prod)
• Run ngu-sw-manifest without arguments from root dir of project (one level above node_modules and src)
• Run ngu-sw-manifest with the --module flag. The routes generated correctly this time.

I tried to use the --lazy-root flag but I had no difference in the error generated, even changing the router. Don't take this as evidence though, I used it when there were some errors in the app.

If someone has questions, feel free to ask. I'll try to answer the best I can.

[alxhub]

@aerojas thanks for the feedback! I'm not surprised --lazy-root didn't work if some of your loadChildren routes were absolute paths, I don't believe the tool supports those.

[vladimir-barsuchenko]

@aerojas @alxhub I'm not able to run ngu-sw-manifest from root directory. Only ./node_modules/.bin/ngu-sw-manifest works for me.

I'm stuck with ./node_modules/.bin/ngu-sw-manifest --module ./src/app/app.component.ts step. Since I have

contains no @NgModules

error

Could you suggest anything? I'm using latest Angular and dependencies. At the moment of this writing it's v.5.2.8

Thanks

[jscti]

+1 having a totally standard app-routing.module.ts 👍

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

and got the same :

node_modules/ng-pwa-tools/lib/common/ng.js:52
        throw new Error(modPath + ' contains no @NgModules');

[vladimir-barsuchenko]

@jscti Haven't tried yet but Angular member advised me to use @angular/service-worker instead. Starting from Angular 5. Seems like the functionality of ng-pwa-tools is built in