Compiler warning when lazy loading component with dynamic import

user_11018826 0
Viewed 583

i am using Angular 9 and its ivy compiler.

I try to lazy load a component with the dynamic import function and the componentFactoryResolver:

const comp = await import('path/component.ts').then(x => x.component)
const factory = this._resolver.resolveComponentFactory(comp);
this.viewContainerRef.createComponent(factory)

It works as expected, i can load the component and use it, but when the lazy loaded component uses a sibling component declared in the same module as the lazy loaded componente i get the following warning:

WARNING in ./src/app/core/components/component.html 1:0 Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

The problem with this warning is, that it apparently creates .js files in the dist folder containing the warning.

angular9 angular lazy-loading
2 Answers
user_72206200

Found the problem.

I am using dynamic paths in the import() function to reduce the path length you need to write when adding a new component.

Apparently webpack can not handle such dynamic paths and prints out warnings.

I now created a dictionary of all components with the whole import like this:

componentPath: () => import('./src/core/component/component.ts')

Edit:

tsconfig.json:
  "compilerOptions": {
    "baseUrl": "./src",
    "downlevelIteration": true,
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
    },
}

An example in my environment.ts:

        export const DynamicComponents = {
    
       exampleComp = () => import('./src/core/exampleComp/example-comp.component').(x => x.ExampleComp)
       ...
       
    }

The component file:

@Component(...)
export class ExampleComp {
}


@NgModule({
declarations: [ExampleComp]
}...)

export class ExampleCompModule {
}
user_110188260
Related