toddmotto / angular-1-5-components-app Goto Github PK

HI,
I have installed all node module, but after executing npm start command on cmd. we are getting below error

gulp

[23:35:43] Failed to load external module @babel/register
[23:35:43] Requiring external module babel-register
[23:35:45] Using gulpfile D:\tribhuvan\angular-1-5-components-app-master\gulpfile.babel.js
[23:35:45] Starting 'clean'...
[23:35:45] Starting 'styles'...
[23:35:45] Starting 'serve'...
[23:35:45] Finished 'serve' after 27 ms
[23:35:45] Starting 'templates'...
[23:35:45] Finished 'clean' after 122 ms
[23:35:45] Starting 'copy'...
[23:35:45] Finished 'templates' after 245 ms
[23:35:45] Starting 'modules'...
[23:35:45] Finished 'modules' after 96 ms
[23:35:45] Starting 'scripts'...

npm ERR! Windows_NT 6.1.7600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: gulp
npm ERR! Exit status 3221225501
npm ERR!
npm ERR! Failed at the [email protected] start script 'gulp'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the contacts package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs contacts
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls contacts
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\tribhuvan\angular-1-5-components-app-master\npm-debug.log

D:\tribhuvan\angular-1-5-components-app-master>

In webpack.confg.js you reference a
const extract = { styles: new extractPlugin('css/styles.css') }

but there is no styles.css file generated during the npm run start process.

Is there something missing?

Kindly share the database structure as I am willing to do with mysql database.

Hi Todd,

I've spent some time the past few weeks reviewing your angular 1.5 component documentation/youtube videos and I feel like I'm getting the hang of this (mostly), but am running into a critical issue regarding an application I'm working on. I have a custom directive that was created in legacy angular (1.4) which I want to keep as a directive due to it's usage as a heavy DOM manipulator. In doing this, I'd like to include it in the template of a component that I've created. In the earlier versions of angular, directives allowed for prototypical inheritance of the scope object from the controller that they were associated with. With this component architecture, I'm wondering how I can gain access to the declared component variables in this custom directive (since scope no longer exists in components really). Do I need to pass in $ctrl to the directive or something to this effect? Or am I just approaching this the completely wrong way.

Any help would be appreciated.

Thanks very much.

Hi Todd!
I try to refactor to TypeScript. I actually using Visual Studio project for that ;)

Thanks a ton for this full project!

As per our conversation, I am going to refactor this codebase to ES6.

Just making an issue here so that I have a ticket to associate my changes :-)

Hello,

According to your style-guide , each component should have it's own scss in their respective folder, but in this example your are not following your own styleguide. To be exact, you are not following the scalable-file-structure's best practice.

I guess you did that because you are not use Webpack, which let you import your scss files within each component , but i might be wrong, how ever, id like to know your thoughts on why you did that :)

Best regards.

Update 1: If you try to use the best practice in combination with the solution provided from this example, you will get errors if you try to use any variable, mixin ,etc

Possible solution: Import your base.scss into these files.

After checking and downloading neccessary dependencies (node, firebase-tools, gulp), npm install, running npm start gives me require is not defined in the browser? I tried this on both the master seed stater and this file same results.

vendor.js:39766 Uncaught ReferenceError: require is not defined
vendor.js:4640 Uncaught Error: [$injector:modulerr] Failed to instantiate module root due to:
Error: [$injector:modulerr] Failed to instantiate module components due to:
Error: [$injector:modulerr] Failed to instantiate module components.auth due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=firebase

@toddmotto, Hi toddmotto i tried it for angular2 projects, i got an issues

info: running processor: readFilesProcessor
error: Error: No file reader found for /home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/src/app/app-routing.module.ts
at matchFileReader (/home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/node_modules/dgeni-packages/base/processors/read-files.js:130:25)
at /home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/node_modules/dgeni-packages/base/processors/read-files.js:66:99
error: Error processing docs: Error: No file reader found for /home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/src/app/app-routing.module.ts
at matchFileReader (/home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/node_modules/dgeni-packages/base/processors/read-files.js:130:25)
at /home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/node_modules/dgeni-packages/base/processors/read-files.js:66:99
[08:52:46] 'dgeni' errored after 315 ms
[08:52:46] Error: No file reader found for /home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/src/app/app-routing.module.ts
at matchFileReader (/home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/node_modules/dgeni-packages/base/processors/read-files.js:130:25)
at /home/lantronix/Desktop/git-xing/doc-generator/angular2-signin/node_modules/dgeni-packages/base/processors/read-files.js:66:99
lantr

Can u please fix it

There is an issue with the webpack.config.js when using sass-loader. The following error occurs when trying to run locally

$ webpack-dev-server -d --progress --colors --inline --hot --https --open --content-base bin/
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'sassLoader'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           sassLoader: ...
         }
       })
     ]
error Command failed with exit code 1.

I cloned the ES2015 branch, then I did npm install and run all global dependencies. If I try npm start it just shows me

The console doesn't show any error. Do you know what I possibly miss?

Update: The master branch works without problems.

I am trying to use your configuration as a base (ES2015 branch) for a new AngularJS+Webpack+Babel project but seeing the code I cannot find the build:dist target script. Is this somehow hiddenly implemented or did you just forgot to put it there?

Also, I see your last commit is 'Revert the template and use templateUrl'. I am using this in a current project already without problems, why did you have to go back to templateUrl and not just template?

Thanks a lot

👋 Hello, we've received a report for a potential critical severity security issue in your repository.

Next Steps

1️⃣ Visit https://huntr.dev/bounties/1-other-toddmotto/angular-1-5-components-app for more advisory information.

2️⃣ Sign-up to validate or speak to the researcher for more assistance.

3️⃣ Propose a patch or outsource it to our community.

Confused or need more help?

• Join us on our Discord and a member of our team will be happy to help! 🤗

• Speak to a member of our team: @JamieSlome

This issue was automatically generated by huntr.dev - a bug bounty board for securing open source code.

App
Routes
✗ should redirect to contacts state
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.6.1/$rootScope/infdig?p0=10&p1=%5B%5D
at ../node_modules/angular/angular.js:68:12
at Scope.$digest (../node_modules/angular/angular.js:17852:19)
at goTo (../src/app/common/app.spec.js:22:18)
at Object. (../src/app/common/app.spec.js:35:7)

ref: $rootScopeProvider - digestTtl(limit);

I just clone the repo, install dependencies, start and run test.. getting this error:

ContactController
✗ should filter contacts
Error: [$injector:unpr] Unknown provider: ContactsControllerDirectivePro vider <- ContactsControllerDirective
http://errors.angularjs.org/1.6.1/$injector/unpr?p0=ContactsControllerDi rectiveProvider%20%3C-%20ContactsControllerDirective
.....
TypeError: Cannot read property 'filteredContacts' of undefined
at Object. (.../src/app/components/contact/contacts/contacts.spec.js:76:24)

ref $onInit - lifecycle hooks in Angular 1.5