Search code examples
angularsystemjsangular-clizonejs

Angular CLI shared folder sub-folders

One of the 'shared' folders in a the angular 2 is getting quite full with services/models so I would like to move files into sub-folders of the shared folder

I'd like to go from this folder structure:

app
 - shared
   - test.service.ts

to

app
 - shared
   -sub-folder
     -test.service.ts

When I do so the app transpiles and the CLI creates a build but in the browser there is an error:

http://localhost:4200/app/shared/test.service.js 404 (Not Found).......zone.js:101

                                 ^- notice the location is not resolved correctly

Above file location is missing /sub-folder/

I've got all the imports done correctly (I've moved the test.service.ts file in and out of the sub folder and once its out of the sub-folder and back into shared folder it works fine...everything loads/no errors)

I've also updated the 'system-config.ts' file to include the 'app/shared/sub-folder' barrel, and added the index.ts with appropriate exports in the 'sub-folder'

How can I (or can I) use sub folders in the shared folder?

Solution

  • If you have src/app/shared/sub-folder/test.service.ts

    import {TestService} from './shared/sub-folder/test.service';

    This works without changing any configuration files in system-config.js.

    Depending what folders you change and what configurations you change. You need to restart you server, and sometimes you need to run ng buld.

    If the problem still is there, try reinstalling angular-cli.