Feature/bug : Relative path incorrect for import statements outside of the current project

In 0.0.30, one cannot create a project within a project (ng new says no), nor it seems, can one have a project take a dependency on another project.

For example, on the command line

md MyAwesomeGamesSite
cd MyAwesomeGamesSite
ng new core
ng new game1
ng new game2

Creates

MyAwesomeGamesSite/core #angular2 library of shared classes, components, w/ tests/coverage etc
MyAwesomeGamesSite/game1 # should depend on core
MyAwesomeGamesSite/game2 # should depend on core

Referencing core components from typescript in game1 looks like

import * as CoreStuff from './../../../../core/src/client/app/core/core.service; // 4 directories up./../../../..

However, the output into (for example) game1/tmp/broccoli_type_script_compiler-input_base_path7Z0eLNNd.tmp does not align the import statements correctly

broccoli_type_script_compiler-input_base_path7Z0eLNNd.tmp needs to be

import * as CoreStuff from './../../../../../core/src/client/app/core/core.service; // 5 directories up

Resulting in the following error message from ng serve

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: Error: Typescript found the following errors:
C:/src/[...]/tmp/broccoli_type_script_compiler-input_base_path7Z0eLNNd.tmp/0/src/client/app/test.ts (4, 28): Cannot find module './../../../../core/src/client/app/core/core.service

node_modules\angular-cli\addon\ng2\utilities\dynamicpathparser.js might also be an issue here…

  if (outputPath.indexOf(rootPath) < 0) {
    throw `Invalid path: "${entityName}" cannot be ` +
        `above the "${path.join('src', 'app')}" directory`;
  }

If one could have sub-projects and build these seperately that would be awesome too 😃

eg.

core // create with ng new core
  /lib
    /core.service.ts
  /games
    /game1 // need to build/deploy this without game 2 assets
    /game2 // need to build/deploy this without game 1 assets 

EDIT: Perhaps being able to do

ng serve arbitrary-component
ng build arbitrary-component

Would do the job too.

Cheers, Matt

[filipesilva]

I think I see what you’re trying to do. I think we haven’t been paying much attention to the ‘project within project’ usecase, because usually that’s solved via npm packages instead.

For local development, I understand you don’t want published npm packages though, nor would you want to go through the ‘version dance’ required to change stuff in core and see it in each site. For this you can use npm link.

For instance:

md MyAwesomeGamesSite
cd MyAwesomeGamesSite
ng new core
ng new game1
ng new game2
cd game1
npm link ../core
cd ../game2
npm link ../core

This should give you your core project as a node module inside each of game1/2. You could then import whatever is needed from core via import {stuff} from 'core'.

That being said, I think what would really suit you is nested routes instead of nested projects. We’re looking at making ng g route able to take on nested routes, and also making them able to be lazy loaded.

Under this scenario, you’d have a single project with a top-level route folder. This would have inside of it a folder for game1, one for game2 and one for core (although the name we’re looking at atm is shared).

game1 and game2 would have access to core - but not to each other. They could also have their own internal nested routes and their own shared folder, and so forth.

This isn’t done yet but we’re looking on having it soon.

EDIT: I think we haven't instead of I think we've.

[filipesilva]

I could give you some info about that, but I think it would be inaccurate. The build process has undergone a lot of changes in the last weeks.

@hansl and @jkuri are the more knowledgeable people on that topic.