Angular2.0 in subdirectory, SystemJS cant import angular components

Question

I am getting started with Angular2.0. I have been following the 5 Min Quickstart and everything works fine although I am using grunt to compile my Typescript and some Sass etc.

I just have one problem I cant solve by myself. I want to move all the public files (generated Javascript and production node modules into a subdirectory. I need to have that, because I run different applications unter the same domian. The frontend depends on the user type that logged in. (backend is written with phalcon)

This is my public folder (the webserver's root)

So the whole Angular applications should live inside the "talent" directory.

The "index.html" contains the following:

<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>

<script>
    System.config({
        baseURL: '/talent',
        packages: {'app': {defaultExtension: 'js',}}
    });
    System.import('app/app');
</script>

SystemJs is able to load my app.js file correctly but then trys to import angular2:

import {bootstrap, Component} from 'angular2/angular2'; 

Corresponding Javascript:

var angular2_1 = require('angular2/angular2');

This sends a request to http://example.dev/talent/angular2/angular2 resulting in an 404 error.

When I move the node_modules folder and the app folder to the webserver's root and remove baseURL: '/talent' it works just fine.

Here are the requests made for both the working solution (everything at root) and the not working part (everything under /talent)

Working:

Not working:

Can you help me getting this to work?

Immediate

I have tried to reproduce the problem with the quick tour problem. Have a look: filedropper.com/example_1 (run npm install, npm run tsc and npm run start) – Immediate

I'm having the same problem - did you found a solution? – Microclimate

I want to get this running as well - I put a bounty on it. – Officious

Answer 1

Had this exact same problem, and just figured it out after several hours. The System config baseURL needs to be set BEFORE angular2.dev.js is loaded. This is because the System.register calls need to be aware of the baseURL at the time of registrations.

e.g.

System.config({ baseURL: '/talent' });

A cleaner way is to just add System.config({ baseURL: '/talent' }) to the very bottom of the system.src.js file.

Schnauzer

thanks @runmarkets! Very happy I found your answer here for my similar issue – Danielladanielle

Answer 2

You can set paths for each library :

System.paths = {
    'angular2/*': '/talent/node_modules/angular2/*',
    'app/*': '/talent/app/*'
};

Does this work for you?

Mimimimic

This didn't help me unfortunately. It breaks the "node" type of importing modules when combining it with TypeScript. Angular imports the core now, but it then refers to other paths that cannot be found. – Officious

Are you using commonjs as module when compiling? You need to set the flag system. – Mimimimic

+1. This worked for me. My use case was that I had my node_modules in the root and subdirectories in the each contain an angular2 app (and thus a systemjs config). Note that I also had to include the rxjs reference. – Mayenne

Answer 3

'angular2/angular2' has been deprecated. Your code should reference 'angular2/core' or the appropriate module for your imports.

You should also not need to specify the path for the angular2 imports in your System.config as System will load them in from the <script> tag you have in the HTML.

You are most likely receiving the 404 error because the angular2.dev.js file is loading 'angular2/core', 'angular2/common', 'angular2/platform/browser', etc... and you are referencing 'angular2/angular2' which is not being registered and therefor SystemJS is attempting to go out and find it.

Change all of your import {...} from 'angular2/angular2' to the correct module import as well. You can find these on the API Preview page of angular.io, or hopefully your IDE will find it for you.

Hurds

Answer 4

I don't know which version of Angular2 you use but now with beta versions you should use these Angular2 modules:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

Then you need to configure SystemJS as described below:

<script>
  System.config({
    map: {
      app: 'talent/app'
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

With this configuration, when trying to load the app/boot module, SystemJS will load the talent/app/boot.js file that was compiled before from the talent/app/boot.ts file. This behavior applies to all elements under the app module but not to other ones.

Modules like angular2/* will be found from files talent/node_modules/angular2/bundles/[something].js you included using <script> tags.

I made some tests and this configuration works for me ;-)

Thierry

Dealfish

Answer 5

I stumbled upon this question when trying to move from a local (dev) environment to a hosted server (CentOS) where the deployed URLs were all different to my local host. If you're in this situation and the accepted answer doesn't solve your problem (I was already importing the updated imports with Angular2 Beta 15) and using baseURL messes other things up (as it did in my situation) then use:

map: {
    app: 'path/to/app/folder'
},

I saw this here and it worked for me (even though it was originally answering a MAMP environment question): Troubles with importing classes from Angular 2 modules with Typescript 1.7

Samurai

Answer 6

Here's what worked for us:

Make the base ref point to the subdirectory containing the angular project. This will ensure that all the node_module dependencies are found, etc. Configure the PathLocationStrategy with a different APP_BASE_HREF so that html5 mode still works for the actual angular app.

bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")

ref: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

ref: https://angular.io/docs/ts/latest/guide/router.html

Achromaticity

Answer 7

base href Most routing applications should add a element to the index.html as the first child in the tag to tell the router how to compose navigation URLs.

<!DOCTYPE html>
<html>
 
<head lang="en">
    <base href="/talent/">
    ......
</head>

Dela