I have installed below software in my System
VS 2017- Version 15.3.3
Node Version - 6.11.3
Angular cli Version - 1.4.1
I want to create component using angular cli inside angular template in VS 2017
Below are the step I am doing but fail to achive the results
Step 1) Create a Project with Angular Template in VS2017
Step 2)Open Cmd - Create a dummy ng project for .angular-cli.json file outside the solution
Step 3)Copy Pasting .angular-cli.json file to my solution under below folder structure
[M:\VS2017 Projects\Trail109\Trail109]
Step 4)Changing from "root": "Src" to "root": "ClientApp"
Step 5)then going inside the solution using cd command in cmd
Step 6)and installing angular/cli for my solution using given command npm install #angular/cli#latest --save-dev
[M:\VS2017 Projects\Trail109\Trail109>npm install #angular/cli#latest --save-dev]
Step 7)after this going to components folders inside ClientApp using cd command in cmd
Step 8)and using the given command ng g component myformname
[M:\VS2017 Projects\Trail109\Trail109\ClientApp\app\components>ng g component myformname]
but the above line gives me below given error
Error: Path "ClientApp/" is invalid.
Path "ClientApp/" is invalid.
Please help What is that I am missing....
VS 2017 angular template has pre rendering enabled by default. If you haven't disabled that, please make sure after changing root to Client app
Amend the .angular.cli : change as follows
"root": "ClientApp",
"outDir": "ClientApp/dist",
Amend the ClientApp folder as follows
Rename app.module.client.ts to app.client.module.ts
Open app.client.module.ts: prepend the declaration with 3 dots “...” and wrap the declaration in brackets.
For example: [...sharedConfig.declarations, ]
Open boot-client.ts: update your import to use the new app.client.module reference.
For example: import { AppModule } from './app/app.client.module';
Open your project file in notepad.
find the tag name which stated with SpaRoot
And Replace your angular project folder name here.
Related
I recently upgraded my project from vuetify 1.5 to 2.1.. I also updated the required dependencies and installed fibers, deepmerge, sass, sass-loader in devdependencies.
Now when I run "yarn serve" it throws following error.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'.
function
-> The run point of the plugin, required method.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[12] misses the property 'apply'.
function
-> The run point of the plugin, required method.
at webpack (/home/usman/projects/project-crm/frontend/node_modules/webpack/lib/webpack.js:31:9)
at serve (/home/usman/projects/project-crm/frontend/node_modules/#vue/cli-service/lib/commands/serve.js:137:22)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
error Command failed with exit code 1.
I don't have a clue where is this error occuring. I searched on internet but didn't found solution on
this error...
configuration.plugins[12] misses the property 'apply'.
OK people!!!
I've found a solution(trick). Off course it is a trick the way I see it but it is working absolutely fine to me. Remember this error happened to me due to upgrade from vuetify 1.5 to 2.1....
Steps I took were,
Created a new project(name = candy) with latest Vue and Vuetify.
Installed all dependencies and devDependencies in this new project(candy in my case) which I had in my original projects package.json file.
You can open package.json file of your original project and terminal in new project(candy) and run commands yarn add "package name in original project or npm install "package name.
Then copied this(candy) package.json file and pasted it in my original project folder and renamed these files and folder to old.
File & folder == node_modules to node_modules_old, package.json to package_old.json, vue.config.js to vue.config_old.js, yarn.lock to yarn_old.lock.
Copy only package.json of candy project to the original project's folder.
Run command yarn install or npm install.
And the server runs now.
Further, you will have to set your code according to the project. It can be in vue.config.js mostly or in babel config file or webpack.config.js.
I have this error using ng new project_name:
An invalid configuration file was found ['angular.json']. Please delete the file before running the command.
I am getting this error I don't know how to get the solution.
I uninstalled #angular/cli and installed again
npm clean cache doesnt work too (I dont know if it is problem of my npm version
npm version is 6.4.1
node version is 8.11.1
what do i need to solve the problem?
If you are using the terminal of IntelliJ IDEA while there is a angular project already imported in the IDEA, it is the problem of the IDEA.So, open the command promt of your windows and create the project.
I did this and I was able to create the project.
The problem seems to be the _ in project_name resulting in the following error:
Schematic input does not validate against the Schema: {"name":"project_name","version":"6.0.1","newProjectRoot":"projects","skipInstall":false,"linkCli":false,"skipGit":false,"commit":null}
Errors:
Data path ".name" should match format "html-selector".
Replace _ e.g. with -.
Further readings:
Error when creating new project with Angular-CLI 6.1.2
Style Guide
Setting the working directory in IntelliJ's Karma task, to the Angular project's main directory, also fixes the problem.
I deleted the file in c:\users\XXX\.angular.json and it was running ok.
Run following if file is hidden. Open Terminal, run mv /Users/shivammishra/.angular.json /Users/shivammishra/angular.json.txt.
mv command will move the file to new location (angular.json.txt) and you can then delete.
Angular.js & Wrong Directions.
First of all, open a file called angular.js in the root folder.
And check if you add some wrong Directory. like the style or something like that. as example.
Suppose you add the bootstrap dependency and you want to add it to your project you will go to the angular.js and add it in the style configuration. so you will add it as the below:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
Check if you add double dot .. not one dot in the path like the below:
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
Or you maybe add it in the following format:
"/node_modules/bootstrap/dist/css/bootstrap.min.css",
or
"node_modules/bootstrap/dist/css/bootstrap.min.css",
The correct format is :
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
Let say I have following component:
#Component({})
export class ServerComponent {
}
When typing #Component, Visual Studio Code suggest me to auto import #angular/core module. I accepted and get this import:
import { Component } from "../../../node_modules/#angular/core";
When I watch online courses, I see when the mentor perfomed the same actions he got much shorter path:
import { Component } from "#angular/core";
My app work OK for both paths, but I want to know how this happen, just for curious.
Questions:
Why my import path is different?
Is there any config that control this behavior?
Does this effect any behavior of my app?
My enviroment:
Windows 10 Pro x64
Visual Studio Code 1.25.1
NPM 5.6.0
Node 8.11.3
Angular CLI: 6.0.8 (npm install -g #angular/cli)
Angular 6.0.9
Mentor's environment:
Mac OSX
Visual Studio Code
Angular CLI 6.0.0 (npm install -g #angular/cli)
Take a look at the tsconfig.json in your main path.
There is (or can be) shortcuts defined for the imports.
It looks like
"paths": {
"#modules/*": ["app/modules/*"],
"#core/*": ["app/core/*"],
"#shared/*": ["app/shared/*"]
}
With that everything that is in app/modules/MyModule/SomeComponent could be imported as #modules/MyModule/SomeComponent
warm regards
Answers
This is just absolute path difference the way visual studio works is it has the node_modules under the project folder added to your workspace ,so it will suggest you absolute path for the node_modules ,in your case #angular/core. In the tutorials you see or generally we just provide the #angular/core import because at runtime angular complier will resolve the path to absolute path ie..,'../../../node_modules/#angular/core'.
There is no config control over to explicitly define this ,its rather the angular compiler behavior or the way angular ecosystem is built because post compilation all he modules gets invoked and injected on the main component.
No it wont affect any behavior of your app.
I'm trying run an Ember project locally : https://github.com/cosmicjs/ember-real-estate-website?files=1. I'm using pycharm 2017 using git-bash as my terminal in win7. I have npm , node and ember installed . In pycharm my project looks like the screenshot.
I've been advised to build the project (Emberjs: Failed to find a valid digest in the 'integrity' attribute , although this is not discussed in the instructions):
$ ember build
Running without permission to symlink will degrade build performance.
See http://ember-cli.com/user-guide/#windows for details.
- BuildingNo ember-cli-build.js found.
You can see the file in the screenshot. What am I doing wrong?
There does not exist a project template that uses Typescript with Express4, there does however exist typescript template using express3. Is it that TS is incompatible with Express4.
I tried by creating regular TS with Express3 template, uninstalled Express3 npm package and added Express4 package. It did not compile.
I also added TDS as explained in https://code.visualstudio.com/Docs/runtimes/nodejs and it gave more errors like cannot find property express.favicon().
Simply create "Basic Node.js Express 4 Application" JavaScipt type application and after remove app.js and add app.ts. After it restart VS and now you should see TS as project icon.
Also run this in package manager console
npm install tsd -g
tsd install express --save
and add this line in the top of app.ts
/// <reference path="path to your tsd.d.ts" />
usually tsd.d.ts will be placed in the root of your solution folder in typings folder